<ui:composition template="/templates/common/commonLayout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://java.sun.com/jsf/html" 
	xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">

			
<ui:define name="body">	
	
    <h:outputStylesheet>
        .atop {
            vertical-align: top;
        }
    </h:outputStylesheet>
    
	<h:form id="form">
		<h:panelGrid columns="2" columnClasses="atop">
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="Filtro rápido" />
				</f:facet>
				<fieldset><legend>Por tipo</legend>
				<ul>
					<a4j:repeat value="#{inmoblesForm.allTipus}" var="tipusStr">
						<li><h:outputLink value="#">#{tipusStr}
								<rich:componentControl target="table" operation="filter"
								event="click">
								<f:param value="tipus" />
								<f:param value="#{tipusStr}" />
								
								<!-- Filtrem per la columna tipus i valor seleccionat -->
								
								
							</rich:componentControl>
						</h:outputLink></li>
					</a4j:repeat>
				</ul>
				</fieldset>
			</rich:panel>
			<rich:dataTable value="#{inmoblesForm.allInventoryItems}" var="inmoble"
				id="table" rows="20">
				<rich:column id="tipus"
					filterValue="#{filterBeanInmobles.tipusFilter}"
					filterExpression="#{filterBeanInmobles.tipusFilter == '' 
					or filterBeanInmobles.tipusFilter == null 
					or filterBeanInmobles.tipusFilter == inmoble.tipusStr}">
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Tipus" />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{inmoble.tipusStr}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Nom" />
					</f:facet>
					<h:outputText value="#{inmoble.nom}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Direccion" />
					</f:facet>
					<h:outputText value="#{inmoble.adreca}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Metres" />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{inmoble.metres}" />
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller />
				</f:facet>
			</rich:dataTable>
		</h:panelGrid>
	</h:form>
	
</ui:define>
	
</ui:composition>